<template>
  <el-container>
    <el-header>
      <strong>后台管理系统模版</strong>
      <div class="header_avater">
        <el-avatar size="medium" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link to="">
                个人中心
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item >
              <router-link to="/login">
                退出
              </router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-link href="" target="_blank">网站</el-link>
        <el-link href="https://www.bilibili.com/" target="_blank">B站</el-link>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
            <router-link to="/">
              <el-menu-item index="0">
                <template slot="title">
                  <i class="el-icon-s-home"></i>
                  <span slot="title">首页</span>
                </template>
              </el-menu-item>
            </router-link>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>管理员管理</span>
              </template>
              <el-menu-item-group>
                <router-link to="/admin">
                  <el-menu-item index="1-1">管理员列表</el-menu-item>
                </router-link>
                <router-link to="/role">
                  <el-menu-item index="1-2">角色列表</el-menu-item>
                </router-link>
                <router-link to="/permission">
                  <el-menu-item index="1-3">权限管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>
.el-container{
  height: 100%;
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.header_avater {
  float: right;
  width: 210px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  /*color: #409EFF;*/
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  line-height: 200px;
}

.el-menu-vertical-demo {
  height: 100%;
}

</style>